<template>
  <div class="register-container">
    <div class="register-wrapper">
      <div class="register-left">
        <div class="register-info">
          <h1>环保公众监督系统</h1>
          <p>Environmental Public Supervision System</p>
          <div class="info-content">
            <h3>公众监督员注册</h3>
            <p>成为环保公众监督员，共同守护美好环境</p>
            <ul>
              <li>
                <el-icon><Check /></el-icon>
                监督身边的环境问题
              </li>
              <li>
                <el-icon><Check /></el-icon>
                提交环保反馈信息
              </li>
              <li>
                <el-icon><Check /></el-icon>
                查看处理进度
              </li>
            </ul>
          </div>
        </div>
      </div>
      
      <div class="register-right">
        <div class="register-form">
          <div class="form-header">
            <h2>注册账号</h2>
            <p>请填写以下信息完成注册</p>
          </div>
          
          <el-form 
            ref="registerFormRef" 
            :model="registerForm" 
            :rules="registerRules" 
            label-width="80px"
            class="register-form-content"
          >
            <el-form-item label="姓名" prop="name">
              <el-input
                v-model="registerForm.name"
                placeholder="请输入真实姓名"
                size="large"
                clearable
              >
                <template #prefix>
                  <el-icon><User /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            
            <el-form-item label="身份证号" prop="idNumber">
              <el-input
                v-model="registerForm.idNumber"
                placeholder="请输入身份证号"
                size="large"
                clearable
              >
                <template #prefix>
                  <el-icon><CreditCard /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            
            <el-form-item label="手机号" prop="phone">
              <el-input
                v-model="registerForm.phone"
                placeholder="请输入手机号"
                size="large"
                clearable
              >
                <template #prefix>
                  <el-icon><Phone /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            
            <el-form-item label="邮箱" prop="email">
              <el-input
                v-model="registerForm.email"
                placeholder="请输入邮箱地址"
                size="large"
                clearable
              >
                <template #prefix>
                  <el-icon><Message /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            
            <el-form-item label="密码" prop="password">
              <el-input
                v-model="registerForm.password"
                type="password"
                placeholder="请输入密码"
                size="large"
                show-password
                clearable
              >
                <template #prefix>
                  <el-icon><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input
                v-model="registerForm.confirmPassword"
                type="password"
                placeholder="请再次输入密码"
                size="large"
                show-password
                clearable
              >
                <template #prefix>
                  <el-icon><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            
            <el-form-item label="地址" prop="address">
              <el-input
                v-model="registerForm.address"
                placeholder="请输入详细地址"
                size="large"
                clearable
              >
                <template #prefix>
                  <el-icon><Location /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            
            <el-form-item prop="agreement">
              <el-checkbox v-model="registerForm.agreement">
                我已阅读并同意
                <a href="#" @click.prevent="showAgreement" class="agreement-link">
                  《用户协议》
                </a>
              </el-checkbox>
            </el-form-item>
            
            <el-form-item>
              <el-button 
                type="primary" 
                size="large" 
                :loading="loading" 
                @click="handleRegister"
                class="register-btn"
              >
                {{ loading ? '注册中...' : '注册' }}
              </el-button>
            </el-form-item>
          </el-form>
          
          <div class="form-footer">
            <p>已有账号？ 
              <router-link to="/login" class="login-link">
                立即登录
              </router-link>
            </p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 用户协议对话框 -->
    <el-dialog 
      v-model="agreementVisible" 
      title="用户协议" 
      width="50%"
      center
    >
      <div class="agreement-content">
        <h3>环保公众监督系统用户协议</h3>
        <p>欢迎使用环保公众监督系统！</p>
        <p>本协议规定了您作为公众监督员的权利和义务：</p>
        
        <h4>1. 监督员权利</h4>
        <ul>
          <li>有权监督身边的环境问题</li>
          <li>有权提交环保反馈信息</li>
          <li>有权查看反馈处理进度</li>
        </ul>
        
        <h4>2. 监督员义务</h4>
        <ul>
          <li>提供真实有效的个人信息</li>
          <li>提交真实的环保反馈</li>
          <li>遵守国家法律法规</li>
        </ul>
        
        <h4>3. 免责声明</h4>
        <p>系统提供的信息仅供参考，具体处理结果以相关部门官方公告为准。</p>
        
        <h4>4. 隐私保护</h4>
        <p>我们承诺保护您的个人隐私信息，不会未经授权泄露给第三方。</p>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="agreementVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Check, User, CreditCard, Phone, Message, Lock, Location } from '@element-plus/icons-vue'

export default {
  name: 'Register',
  components: {
    Check,
    User,
    CreditCard,
    Phone,
    Message,
    Lock,
    Location
  },
  setup() {
    const store = useStore()
    const router = useRouter()
    const { proxy } = getCurrentInstance()
    
    const registerFormRef = ref()
    const loading = ref(false)
    const agreementVisible = ref(false)
    
    const registerForm = ref({
      name: '',
      idNumber: '',
      phone: '',
      email: '',
      password: '',
      confirmPassword: '',
      address: '',
      agreement: false
    })
    
    // 身份证号验证
    const validateIdNumber = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入身份证号'))
        return
      }
      
      const idReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
      if (!idReg.test(value)) {
        callback(new Error('请输入正确的身份证号'))
        return
      }
      
      callback()
    }
    
    // 手机号验证
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入手机号'))
        return
      }
      
      const phoneReg = /^1[3-9]\d{9}$/
      if (!phoneReg.test(value)) {
        callback(new Error('请输入正确的手机号'))
        return
      }
      
      callback()
    }
    
    // 邮箱验证
    const validateEmail = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入邮箱地址'))
        return
      }
      
      const emailReg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
      if (!emailReg.test(value)) {
        callback(new Error('请输入正确的邮箱地址'))
        return
      }
      
      callback()
    }
    
    // 确认密码验证
    const validateConfirmPassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请再次输入密码'))
        return
      }
      
      if (value !== registerForm.value.password) {
        callback(new Error('两次输入的密码不一致'))
        return
      }
      
      callback()
    }
    
    // 用户协议验证
    const validateAgreement = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请同意用户协议'))
        return
      }
      callback()
    }
    
    const registerRules = {
      name: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
        { min: 2, max: 20, message: '姓名长度应在2到20个字符之间', trigger: 'blur' }
      ],
      idNumber: [
        { validator: validateIdNumber, trigger: 'blur' }
      ],
      phone: [
        { validator: validatePhone, trigger: 'blur' }
      ],
      email: [
        { validator: validateEmail, trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 20, message: '密码长度应在6到20个字符之间', trigger: 'blur' }
      ],
      confirmPassword: [
        { validator: validateConfirmPassword, trigger: 'blur' }
      ],
      address: [
        { required: true, message: '请输入地址', trigger: 'blur' },
        { min: 5, max: 100, message: '地址长度应在5到100个字符之间', trigger: 'blur' }
      ],
      agreement: [
        { validator: validateAgreement, trigger: 'change' }
      ]
    }
    
    const showAgreement = () => {
      agreementVisible.value = true
    }
    
    const handleRegister = async () => {
      if (!registerFormRef.value) return
      
      const valid = await registerFormRef.value.validate()
      if (!valid) return
      
      loading.value = true
      
      try {
        const registerData = {
          name: registerForm.value.name,
          idNumber: registerForm.value.idNumber,
          phone: registerForm.value.phone,
          email: registerForm.value.email,
          password: registerForm.value.password,
          address: registerForm.value.address
        }
        
        await store.dispatch('user/supervisorRegister', registerData)
        
        ElMessage.success('注册成功！请登录')
        
        // 跳转到登录页面
        router.push('/login')
        
      } catch (error) {
        console.error('Register error:', error)
        ElMessage.error(error.message || '注册失败，请重试')
      } finally {
        loading.value = false
      }
    }
    
    return {
      registerFormRef,
      loading,
      agreementVisible,
      registerForm,
      registerRules,
      showAgreement,
      handleRegister
    }
  }
}
</script>

<style lang="scss" scoped>
.register-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.register-wrapper {
  width: 100%;
  max-width: 1200px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  min-height: 700px;
}

.register-left {
  flex: 1;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.register-info {
  text-align: center;
  
  h1 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 10px;
  }
  
  > p {
    font-size: 16px;
    opacity: 0.9;
    margin-bottom: 40px;
  }
}

.info-content {
  h3 {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 10px;
  }
  
  p {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 20px;
  }
  
  ul {
    text-align: left;
    list-style: none;
    padding: 0;
    
    li {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      
      .el-icon {
        margin-right: 8px;
        font-size: 16px;
      }
    }
  }
}

.register-right {
  flex: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.register-form {
  width: 100%;
  max-width: 450px;
}

.form-header {
  text-align: center;
  margin-bottom: 30px;
  
  h2 {
    font-size: 28px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
  }
  
  p {
    color: #666;
    font-size: 14px;
  }
}

.register-form-content {
  :deep(.el-form-item) {
    margin-bottom: 20px;
    
    .el-form-item__label {
      font-weight: 500;
      color: #333;
    }
  }
  
  .register-btn {
    width: 100%;
    height: 44px;
    font-size: 16px;
    font-weight: 500;
    margin-top: 10px;
  }
}

.agreement-link {
  color: #409eff;
  text-decoration: none;
  
  &:hover {
    text-decoration: underline;
  }
}

.form-footer {
  text-align: center;
  margin-top: 20px;
  
  p {
    color: #666;
    font-size: 14px;
  }
  
  .login-link {
    color: #409eff;
    text-decoration: none;
    
    &:hover {
      text-decoration: underline;
    }
  }
}

.agreement-content {
  max-height: 400px;
  overflow-y: auto;
  padding: 20px;
  
  h3 {
    color: #333;
    margin-bottom: 15px;
  }
  
  h4 {
    color: #666;
    margin-top: 20px;
    margin-bottom: 10px;
  }
  
  p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 10px;
  }
  
  ul {
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
    
    li {
      margin-bottom: 5px;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .register-wrapper {
    flex-direction: column;
    margin: 10px;
  }
  
  .register-left {
    padding: 30px 20px;
  }
  
  .register-info h1 {
    font-size: 24px;
  }
  
  .register-right {
    padding: 30px 20px;
  }
  
  .register-form-content {
    :deep(.el-form-item) {
      .el-form-item__label {
        width: 70px !important;
      }
    }
  }
}
</style> 